<template>
    <div>
        <el-page-header content="编辑岗位" @back="handleBack()" title="招聘管理" />
        <el-form ref="recruitFormRef" :model="recruitForm" :rules="recruitFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <!-- 岗位名称 -->
            <el-form-item label="岗位名称" prop="position">
                <el-input v-model="recruitForm.position" />
            </el-form-item>
            <!-- 薪资范围 -->
            <el-form-item label="薪资范围" prop="salary">
                <el-input v-model="recruitForm.salary" placeholder="例如：15k-20k" />
            </el-form-item>
            <!-- 岗位要求 -->
            <el-form-item label="岗位要求" prop="requirement">
                <!-- 使用editor组件 -->
                <editor @event="handleChange" :content="recruitForm.requirement" v-if="recruitForm.requirement"/>
            </el-form-item>
            <!-- 岗位类型 -->
            <el-form-item label="岗位类型" prop="type">
                <el-select v-model="recruitForm.type" class="m-2" placeholder="请选择岗位类型" style="width:100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- 工作城市 -->
            <el-form-item label="工作城市" prop="city">
                <el-input v-model="recruitForm.city" />
            </el-form-item>
            <!-- 更新岗位 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm()">更新岗位</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// 引入editor组件
import editor from "@/components/editor/Editor"
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()
const recruitFormRef = ref()
const recruitForm = reactive({
    position: "",
    salary: "",
    requirement: "",
    type: 1,  // 1:技术岗位 2：产品岗位 3：市场岗位 4：运营岗位 5：设计岗位
    city: "",
    isPublish: 0  //0:未发布  1：已发布
})

// 规则
const recruitFormRules = reactive({
    position: [
        { required: true, message: "请输入岗位名称", trigger: "blur" }
    ],
    salary: [
        { required: true, message: "请输入薪资范围", trigger: "blur" }
    ],
    requirement: [
        { required: true, message: "请输入岗位要求", trigger: "blur" }
    ],
    type: [
        { required: true, message: "请选择岗位类型", trigger: "blur" }
    ],
    city: [
        { required: true, message: "请输入工作城市", trigger: "blur" }
    ]
})

// 每次editor内容改变的回调
const handleChange = (data) => {
    recruitForm.requirement = data
}

// 岗位类型
const options = [
    {
        label: "技术岗位",
        value: 1,
    },
    {
        label: "产品岗位",
        value: 2,
    },
    {
        label: "市场岗位",
        value: 3,
    },
    {
        label: "运营岗位",
        value: 4,
    },
    {
        label: "设计岗位",
        value: 5,
    }
]

// 提交校验
const submitForm = () => {
    recruitFormRef.value.validate(async (valid) => {
        if (valid) {
            // 后台通讯
            await axios.put("/adminapi/recruit/list", recruitForm)
            router.back()
        }
    })
}

// 点击返回
const handleBack = () => {
    router.back()
}

// 获取当前页面数据
onMounted(async () => {
    const res = await axios.get(`/adminapi/recruit/list/${route.params.id}`)
    // 绑定初始值
    Object.assign(recruitForm, res.data.data[0])
})
</script>

<!-- 样式 -->
<style lang="scss" scoped>
.el-form {
    margin-top: 50px;
}
</style>
